<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>\
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="box">
    <h2>注册</h2>
    <div class="input-box">
        <label>账号</label>
        <input type="text" id="username">
    </div>
    <div class="input-box">
        <label>密码</label>
        <input type="password" id="password">
    </div>
    <div class="btn-box">
        <div>
            <button id="signing">注册</button>
        </div>
    </div>
</div>

<!-- 引入 jquery -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!-- 实现前后端交互逻辑 -->
<script>

    let sign = document.querySelector("#signing");

    sign.onclick = function () {
        let username = document.querySelector("#username").value;
        let password = document.querySelector("#password").value;

        if(username === "" && password === "") {
            alert("账号和密码不能为空！！！");
            return;
        }

        $.ajax({
           url: '/register',
           type: 'post',
           data: {
               username: username,
               password: password
           },
           success: function (user) {
               if(user && user.userId > 0) {
                   alert("注册成功");
                   location.assign("/login.html");
               }else {
                   alert("注册失败");
               }
           }
        });


    }

</script>


</body>
</html>